<template>
	<view class="pr" :data-theme="theme()" :class="theme() || ''">
		<!-- 头部背景图 -->
		<view class="bg_topimg">
			<view :style="'height:' + topheight + 'px;'" class="bg-head-shoadow"></view>
			<image :style="'height:' + topheight + 'px;'" class="bg-head" :src="shop_info.backgroundPath"
				mode="aspectFill"></image>
		</view>
		<!-- 头部 -->
		<view class="shop_head" :class="{ bgNull: shop_info.backgroundPath }">
			<!-- #ifndef MP-WEIXIN-->
			<view class="state_top"></view>
			<!-- #endif -->
			<view class="head_top" :style="'height:' + topBarTop() + 'px;'"></view>
			<view class="d-b-c serach-box" :style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;'">
				<!-- 返回首页按钮 -->
				<view @click="gotoPage('/pages/index/index')" class="icon iconfont icon-Homehomepagemenu"></view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="d-s-c flex-1">
					<view class="top_search special d-s-c">
						<text class="icon iconfont icon-sousuo"></text>
						<input type="text" class="flex-1 ml10 f26 gray3" placeholder-class="f26 gray9"
							:placeholder="$t('shop.search_product')" v-model="search" confirm-type="search"
							@confirm="searchFunc()" />
					</view>
				</view>
				<!-- #endif -->
				<!-- 搜索栏 小程序胶囊处理 -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="d-s-c flex-1">
					<view class="top_search search-wx d-s-c" :style="'height:' +
						topBarHeight() +
						'px;;margin-right:' +
						topBarRight() +
						';'
						">
						<text class="icon iconfont icon-sousuo"></text>
						<input type="text" class="flex-1 ml10 f26 gray3" placeholder-class="f26 gray9"
							:placeholder="$t('shop.search_product')" v-model="search" confirm-type="search"
							@confirm="searchFunc()" />
					</view>
				</view>
				<!-- #endif -->
			</view>
			<!-- 店铺信息 -->
			<view class="shop_head_info">
				<view class="d-s-s mb30">
					<view class="shop_logo">
						<image class="shop_logo_image" :src="shop_info.logoFilePath || '/static/shop-default.png'"
							mode="aspectFill"></image>
					</view>
					<view class="shop_info">
						<view class="white f30 fb title mb10">
							{{ shop_info.name || ""
							}}<text class="icon iconfont icon-jiantou1" @click="
								gotoPage(
									'/pages/shop/shopDetil?shopSupplierId=' + shopSupplierId
								)
								"></text>
						</view>
						<view class="d-s-c white f24 mb10">
							<view class="pr d-s-c">
								<view class="starts-box">
									<image class="starts" v-for="(itme, index) in getScore(shop_info.serverScore, 1)"
										:key="index" src="/static/icon/start-2.png" mode=""></image>
									<image class="starts" v-if="getScore(shop_info.serverScore, 2)"
										src="/static/icon/start-1.png" mode=""></image>
								</view>
								<image class="starts" v-for="(itme, index) in 5" :key="index"
									src="/static/icon/start-0.png" mode=""></image>
							</view>
							{{ shop_info.serverScore || "" }}{{ $t('shop.minute') }}
						</view>
						<view class="f24 white">{{ $t('shop.main_brands') }}{{ shop_info.categoryName || "" }}</view>
					</view>
				</view>
				<view class="d-b-c f24 white">
					<view class="d-c d-c-c p-0-30">
						<view class="mb10">{{ shop_info.productSales || "0" }}</view>
						<view>{{ $t('shop.sales_volume') }}</view>
					</view>
					<view class="d-c d-c-c p-0-30">
						<view class="mb10">{{ shop_info.favCount || "0" }}</view>
						<view>{{ $t('shop.followers') }}</view>
					</view>
					<view class="flex-1 d-e-c">
						<view class="collected" @click="guanzhu()">
							{{ isfollow ? $t('shop.followed') : $t('shop.follow') }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="'height:' + scrollviewHigh + 'rpx;'" class="scroll-Y pr"
			lower-threshold="50" @scrolltolower="scrolltolowerFunc">
			<view class="swiper-box pr" v-if="adList && adList != ''">
				<swiper class="swiper" autoplay :interval="2000" @change="changeSwiper">
					<swiper-item class="o-h d-c-c" v-for="(item, index) in adList" :key="index">
						<image :src="item.filePath"></image>
					</swiper-item>
				</swiper>
				<view class="swiper-dots rectangle ww100 d-c-c">
					<view :class="swiperCurrent == index ? 'swiper-dot active' : 'swiper-dot'"
						v-for="(item, index) in adList" :key="index"></view>
				</view>
			</view>
			<!-- 商品导航栏 -->
			<view class="inner-tab" v-if="nav_type == 0">
				<view :class="type_active == 'all' ? 'item active' : 'item'" @click="tabTypeFunc('all')">
					<view class="box">{{ $t('shop.comprehensive') }}</view>
				</view>
				<view :class="type_active == 'sales' ? 'item active' : 'item'" @click="tabTypeFunc('sales')">
					<view class="box">{{ $t('shop.sales_volume') }}</view>
				</view>
				<view :class="type_active == 'price' ? 'item active' : 'item'" @click="tabTypeFunc('price')">
					<view class="box"><text>{{ $t('shop.price') }}</text></view>
				</view>
				<view class="item" @click="select_type()">
					<view class="box">
						<image class="box-type" :src="isLieBiao == true
								? '/static/shop/liebiao.png'
								: '/static/shop/tubiao.png'
							">
						</image>
					</view>
				</view>
			</view>
			<!-- 商品导航栏 -->
			<view class="product-lists" v-if="nav_type == 0" :class="isLieBiao ? '' : 'list-2'">
				<view class="product_item" v-for="(item, index) in product_list" :key="index"
					@click="goto_product(item.productId)">
					<view class="product_images pr">
						<view class="product-sellout" v-if="item.productStock <= 0">
							<view class="product-sellout-btn">{{ $t('shop.sold_out') }}</view>
						</view>
						<image class="product_image" :src="item.productImage" mode="aspectFill"></image>
					</view>
					<view class="product_item_info">
						<view class="product-name">{{ item.productName }}</view>
						<view class="product-sale">{{ $t('shop.total_transactions') }}{{ item.productSales
							}}{{ $t('shop.transactions') }}</view>
						<view class="d-s-c pb10">
							<view class="f24 theme-price mr16">
								HK$<text class="f32 fb">{{ item.productPrice }}</text>
							</view>
							<view class="text-d-line gray9 f24" v-if="item.linePrice > 0">HK${{ item.linePrice }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 直播 -->
			<view v-if="nav_type == 1">
				<view class="live_list" v-if="liveList.length > 0">
					<view v-for="(liveitem, liveindex) in liveList" :key="liveindex" class="live_item"
						@click="toRoom(liveitem)">
						<view v-if="liveitem.recordUrl != ''" class="record">{{ $t('shop.replay_available') }}</view>
						<view v-if="liveitem.recordUrl == ''" class="record_off">{{ $t('shop.replay_generating') }}</view>
						<view class="live_img">
							<image :src="liveitem.share.file_path" mode=""></image>
						</view>
					</view>
				</view>
				<view class="ww100" v-else>
					<view class="f30 gray6 tc mt50 pt20">{{ $t('shop.no_live_room') }}</view>
				</view>
			</view>
			<!-- 优惠券 -->
			<view class="coupon" v-if="nav_type == 2">
				<view class="diy-coupon">
					<view class="item-wrap" v-for="(item, index) in listData" :key="index">
						<view class="coupon-item" :class="'coupon-item-' + item.colorText">
							<view class="operation d-b-c">
								<view class="flex-1 coupon-content">
									<view class="mb20 text-ellipsis">
										<text class="f40 fb">{{ item.name }}</text>
									</view>
									<view class="f22 gray9 mb20">
										<template v-if="item.expireType == 10">
											{{ $t('shop.validity_period_receive') }}{{ item.expireDay
											}}{{ $t('shop.validity_days') }}
										</template>
										<template v-if="item.expireType == 20">
											{{ $t('shop.validity_period') }}{{ item.startTimeText
											}}{{ $t('shop.to_place1', { place1: item.endTimeText }) }}
										</template>
									</view>
									<view v-if="item.bigPrice != 0" class="f22">
										({{ $t('shop.max_discount_place1_yuan', { place1: item.bigPrice }) }})</view>
								</view>
								<view class="right-box d-c-c d-c">
									<view class="theme-price mb10" v-if="item.couponType == 10">
										<text class="f24">HK$</text>
										<text class="f52 fb">{{ item.reducePrice * 1 }}</text>
									</view>
									<view class="mb10 theme-price" v-if="item.couponType == 20">
										<text class="f52 fb">{{ item.discount / 10 }}</text>
										<text class="f24">{{ $t('shop.discount') }}</text>
									</view>
									<view class="f24 mb10">
										{{
											item.minPrice > 0
												? $t('shop.full') + item.minPrice * 1 + $t('shop.yuan_available')
												: $t('shop.no_threshold')
										}}
									</view>
									<view v-if="item.isGet == 0" class="f26 coupon-btn theme-btn"
										@click="receiveCoupon(index)">{{ $t('shop.receive') }}
									</view>
									<button type="default" v-else class="f26 coupon-btn btn-gray white" v-on:click.stop>
										{{ $t('shop.received') }}
									</button>
								</view>
							</view>
						</view>
						<view class="range_item d-b-c" v-if="item.applyRange == 20" @click.stop="
							gotoPage(
								'/pages/coupon/detail?couponId=' +
								item.couponId +
								'&applyRange=' +
								item.applyRange
							)
							">
							<view class="gray9 f24">
								{{ $t('shop.limited_to_selected_items') }}
								<text class="icon iconfont icon-jiantou"
									style="color: #999999; font-size: 22rpx"></text>
							</view>
							<view class="gray9 f24">{{ $t('shop.coupon_not_supported_for_transfer') }}</view>
						</view>
						<view class="range_item d-b-c" v-else-if="item.applyRange == 30" @click.stop="
							gotoPage(
								'/pages/coupon/detail?couponId=' +
								item.couponId +
								'&applyRange=' +
								item.applyRange
							)
							">
							<view class="gray9 f24">
								{{ $t('shop.limited_to_selected_category_items') }}
								<text class="icon iconfont icon-jiantou"
									style="color: #999999; font-size: 22rpx"></text>
							</view>
							<view class="gray9 f24">{{ $t('shop.coupon_not_supported_for_transfer') }}</view>
						</view>
						<view class="range_item d-b-c" v-else>
							<view class="gray9 f24">
								{{ $t('shop.universal') }}
								<text class="icon iconfont icon-jiantou"
									style="color: #999999; font-size: 22rpx"></text>
							</view>
							<view class="gray9 f24">{{ $t('shop.coupon_not_supported_for_transfer') }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 客服 -->
			<view v-if="nav_type == 3">
				<view class="d-s-s d-c p20 mpservice-wrap" v-if="!isloding">
					<view class="noDatamodel" v-if="
						dataModel == null ||
						(dataModel.qq == '' &&
							dataModel.wechat == '' &&
							dataModel.phone == '')
					">
						{{ $t('shop.merchant_has_not_set_customer_service') }}</view>
					<template v-if="dataModel != null">
						<view v-if="dataModel.qq != ''" class="d-b-c p-30-0 f34 ww100 border-b"
							@click="copyQQ(dataModel.qq)">
							<image src="/static/icon/concat1.png" mode="widthFix" class="imgIcon"></image>
							<view class="p-0-30 flex-1">
								<view>{{ $t('shop.official') }}QQ</view>
								<view class="desc">{{ dataModel.qq }}</view>
							</view>
							<text class="txt">{{ $t('shop.click_to_copy') }}</text>
						</view>
						<view v-if="dataModel.wechat != ''" class="d-b-c p-30-0 f34 ww100 border-b"
							@click="copyQQ(dataModel.qq)">
							<image src="/static/icon/concat3.png" mode="widthFix" class="imgIcon"></image>
							<view class="p-0-30 flex-1">
								<view>{{ $t('shop.official_wechat') }}</view>
								<view class="desc">{{ dataModel.wechat }}</view>
							</view>
							<text class="txt">{{ $t('shop.click_to_copy') }}</text>
						</view>
						<view v-if="dataModel.phone != ''" class="d-b-c p-30-0 f34 ww100"
							@click="callPhone(dataModel.phone)">
							<image src="/static/icon/concat2.png" mode="widthFix" class="imgIcon"></image>
							<view class="p-0-30 flex-1">
								<view>{{ $t('shop.official_hotline') }}</view>
								<view class="desc">{{ dataModel.phone }}</view>
							</view>
							<text class="txt">{{ $t('shop.one_click_call') }}</text>
						</view>
					</template>
				</view>
			</view>
			<!-- 商品列表 -->
			<view v-if="nav_type == 0">
				<view class="d-c-c p30" v-if="product_list.length == 0 && !loading">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">{{ $t('shop.no_related_records') }}</text>
				</view>
				<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
				<view class="" style="width: 100%; height: 100rpx"></view>
			</view>
		</scroll-view>
		<!-- 底部导航 -->
		<view class="d-a-c nav_bottom">
			<view :class="nav_type == 0 ? 'active' : ''" @click="nav_type = 0">
				<view class="icon iconfont icon-Homehomepagemenu"></view>
				<view>{{ $t('shop.home') }}</view>
			</view>
			<view v-if="is_record == 1 && is_open == 1" :class="nav_type == 1 ? 'active' : ''" @click="nav_type = 1">
				<view class="icon iconfont icon-zhibo2"></view>
				<view>{{ $t('shop.live_broadcast') }}</view>
			</view>
			<view v-if="listData.length > 0" :class="nav_type == 2 ? 'active' : ''" @click="nav_type = 2">
				<view class="icon iconfont icon-hongbao1"></view>
				<view>{{ $t('shop.coupon') }}</view>
			</view>
			<view v-if="service_open" :class="nav_type == 3 ? 'active' : ''" @click="toSevice">
				<view class="icon iconfont icon-kefu3"></view>
				<view>{{ $t('shop.customer_service') }}</view>
			</view>
		</view>
		<Mpservice v-if="isMpservice" :isMpservice="isMpservice" :shopSupplierId="shopSupplierId"
			@close="closeMpservice">
		</Mpservice>
	</view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more.vue";
import Mpservice from "@/components/mpservice/Mpservice.vue";
export default {
	components: {
		uniLoadMore,
		Mpservice,
	},
	data() {
		return {
			isLieBiao: true,
			shop_info: "", //店铺信息
			product_list: "", //商品列表
			adList: "", //banner列表
			dataList: "",
			shopSupplierId: "", //店铺ID
			isfollow: "", // 是否关注本店
			// ***********
			/*是否显示点*/
			indicatorDots: false,
			/*是否自动*/
			autoplay: true,
			/*切换时间*/
			interval: 5000,
			/*动画过渡时间*/
			duration: 1000,
			/*数据列表*/
			listData: [], //优惠券列表
			// ************
			/*顶部刷新*/
			topRefresh: false,
			/*底部加载*/
			loading: true,
			/*没有更多*/
			no_more: false,
			/*类别选中*/
			type_active: "all",
			/*价格选中*/
			price_top: false,
			/*店铺列表*/
			shopData: [],
			/*当前页面*/
			page: 1,
			list_rows: 15,
			search: "",
			last_page: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			topheight: 0,
			nav_type: 0,
			is_open: 0,
			is_record: 0,
			liveList: [],
			dataModel: {
				qq: "",
				wechat: "",
				phone: "",
			},
			service_type: 0,
			service_open: 0,
			statusBarHeight: 0,
			titleBarHeight: 0,
			isMpservice: false,
			adList: "", //轮播图
			/* 轮播图指示点 */
			swiperCurrent: 0,
		};
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.product_list.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		},
	},
	onLoad(option) {
		let self = this;
		self.GetStatusBarHeight();
		self.shopSupplierId = option.shopSupplierId;
	},
	onShow() {
		uni.setNavigationBarTitle({
			title: this.$t('user.merchant_home')
		})
	},
	mounted() {
		this.getData();
		this.getProduct(this.type_active);
	},
	onPullDownRefresh() {
		/*下拉到顶，页面值还原初始化*/
		this.restoreData();
		this.getData();
		this.getProduct(this.type_active);
	},
	methods: {
		changeSwiper(e) {
			this.swiperCurrent = e.detail.current;
		},
		searchFunc() {
			this.shopData = [];
			this.product_list = [];
			this.page = 1;
			this.category_id = 0;
			this.sortType = "";
			this.sortPrice = 0;
			this.getProduct(this.type_active);
		},
		getScore(n, type) {
			n = n * 1;
			if (n <= 0 || !n) {
				return 0;
			}
			let num = n % 1;
			if (type == 1) {
				return n - num;
			}
			if (type == 2) {
				if (num == 0) {
					return 0;
				} else {
					return 1;
				}
			}
		},
		GetStatusBarHeight() {
			const SystemInfo = uni.getSystemInfoSync();
			// #ifdef MP-WEIXIN
			let that = this;
			let statusBarHeight = SystemInfo.statusBarHeight;
			this.statusBarHeight = uni.getMenuButtonBoundingClientRect().top;
			this.titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
			// #endif
			// #ifndef MP-WEIXIN
			this.statusBarHeight = SystemInfo.statusBarHeight;
			this.titleBarHeight = 30;
			// #endif
		},
		/*初始化*/
		init() {
			let self = this;
			uni.getSystemInfo({
				success(res) {
					self.phoneHeight = res.windowHeight;
					// 计算组件的高度
					let view = uni.createSelectorQuery().in(self).select(".shop_head");
					view
						.boundingClientRect((data) => {
							self.topheight = data.height;
							let h = self.phoneHeight * 2 - data.height * 2 - 100;
							self.scrollviewHigh = h;
							uni.hideLoading();
						})
						.exec();
				},
			});
		},
		/*可滚动视图区域到底触发*/
		scrolltolowerFunc() {
			if (this.nav_type == 2) {
				return;
			}
			let self = this;
			self.bottomRefresh = true;
			self.page++;
			self.loading = true;
			if (self.page > self.last_page) {
				self.loading = false;
				self.no_more = true;
				return;
			}
			self.getProduct(self.type_active);
		},
		getProduct(e) {
			let self = this;
			let page = self.page;
			self.loading = true;
			self._postBody(
				"product/product/lists", {
				pageIndex: page || 1,
				pageSize: self.list_rows,
				sortType: "price",
				sortPrice: 1,
				sortType: e,
				type: "sell",
				shopSupplierId: self.shopSupplierId,
				search: self.search,
			},
				function (res) {
					self.loading = false;
					self.product_list = [...self.product_list, ...res.data.records];
					self.last_page = res.data.lastPage;
					if (res.data.lastPage <= 1) {
						self.no_more = true;
					}
				}
			);
		},
		/*还原初始化*/
		restoreData() {
			this.shopData = [];
			this.product_list = [];
			this.page = 1;
			this.category_id = 0;
			this.search = "";
			this.sortType = "";
			this.sortPrice = 0;
		},
		/*类别切换*/
		tabTypeFunc(e) {
			let self = this;
			if (e != self.type_active) {
				self.product_list = [];
				self.page = 1;
				self.no_more = false;
				self.loading = true;
				self.type_active = e;
				self.getProduct(e);
			}
		},

		//获取数据列表
		getData() {
			let self = this;
			self.loading = true;
			self._postBody(
				"supplier/index/index", {
				shopSupplierId: self.shopSupplierId,
				visitcode: self.getVisitcode(),
			},
				(res) => {
					self.loading = false;
					// self.page = res.data.productList.current_page
					// self.last_page = res.data.productList.last_page
					// self.product_list = [...self.product_list, ...res.data.productList.data];
					self.shop_info = res.data.detail;
					self.adList = res.data.adList;
					self.isfollow = res.data.detail.isfollow;
					self.listData = res.data.couponList;
					self.service_open = res.data.serviceOpen;
					self.dataModel = res.data.service;
					self.service_type = res.data.serviceType;
					if (!self.scrollviewHigh) {
						self.$nextTick(function () {
							self.init();
						});
					}
					// self.getservice();
				}
			);
		},
		// getservice() {
		// 	let self = this;
		// 	self.isloding = true;
		// 	self._get(
		// 		'index/mpService',
		// 		{
		// 			shopSupplierId: self.shopSupplierId
		// 		},
		// 		function(res) {
		// 			if (res.data) {
		// 				self.dataModel = res.data.mpService;
		// 			} else {
		// 				self.dataModel = null;
		// 			}

		// 			self.isloding = false;
		// 		}
		// 	);
		// },
		//选择图标模式或者列表模式    true 为列表模式  false 为图表模式
		select_type() {
			let self = this;
			self.isLieBiao = !self.isLieBiao;
		},
		//跳转首页
		goto_home() {
			this.gotoPage("/pages/index/index");
		},
		//跳转商品页面
		goto_product(productId) {
			this.gotoPage("/pages/product/detail/detail?productId=" + productId);
		},
		//关注店铺/取消关注
		guanzhu() {
			let self = this;
			self._postBody(
				"user/favorite/add", {
				pid: self.shopSupplierId,
				type: 10,
			},
				(res) => {
					if (self.isfollow == 0) {
						self.isfollow = 1;
					} else if (self.isfollow == 1) {
						self.isfollow = 0;
					}
				}
			);
		},
		/**
		 * 领取优惠券
		 */
		receiveCoupon: function (index) {
			let self = this;
			let item = self.listData[index];
			if (item.state == 0) {
				uni.showToast({
					title: this.$t('shop.sold_out0'),
					icon: "none",
				});
				return false;
			}
			self._post(
				"user/coupon/receive", {
				couponId: item.couponId,
			},
				function (result) {
					uni.showToast({
						title: self.$t('shop.receive_success'),
						icon: "success",
						mask: true,
						duration: 2000,
					});
					// item.state = 0;
					item.state.text = this.$t('shop.received');
				}
			);
			self.getData(self.type_active);
		},
		/*复制*/
		copyQQ(message) {
			const self = this;
			//#ifdef MP-WEIXIN
			uni.setClipboardData({
				//准备复制的数据
				data: message,
				success: function (res) {
					uni.showToast({
						title: self.$t('shop.copy_success'),
						icon: "success",
						mask: true,
						duration: 2000,
					});
				},
			});
			//#endif
			//#ifdef H5
			var input = document.createElement("input");
			input.value = message;
			document.body.appendChild(input);
			input.select();
			input.setSelectionRange(0, input.value.length),
				document.execCommand("Copy");
			document.body.removeChild(input);
			uni.showToast({
				title: self.$t('shop.copy_success'),
				icon: "success",
				mask: true,
				duration: 2000,
			});
			//#endif
		},
		/*拨打电话*/
		callPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone,
			});
		},
		toRoom(item) {
			if (item.recordUrl != "") {
				this.gotoPage(
					"/pagesLive/live/live?roomId=" + item.roomId + "&sence=join"
				);
			} else {
				return false;
			}
		},
		toSevice() {
			if (
				this.service_type == 10 ||
				this.shop_info.userId == uni.getStorageInfoSync("userId")
			) {
				this.nav_type = 3;
			} else if (this.service_type == 20) {
				if (this.shop_info.serviceUserId == 0) {
					uni.showToast({
						title: this.$t('shop.customer_service_not_set'),
						icon: "none", //如果要纯文本，不要icon，将值设为'none'
						duration: 2000, //持续时间为 2秒
					});
				} else {
					if (this.getUserId()) {
						if (
							this.shop_info.serviceUserId &&
							this.shop_info.serviceUserId != 0
						) {
							this.gotoPage(
								"/pages/plus/chat/chat?userId=" +
								this.shop_info.serviceUserId +
								"&shopSupplierId=" +
								this.shop_info.shopSupplierId +
								"&nickName=" +
								this.shop_info.nickName
							);
						} else {
							this.nav_type = 3;
						}
					} else {
						this.doLogin();
					}
				}
			}
		},
		// toSevice() {
		//   if (!this.getUserId()) {
		//     this.doLogin();
		//     return;
		//   }
		//   if (
		//     this.service_type == 10 ||
		//     this.shop_info.userId == uni.getStorageInfoSync("userId")
		//   ) {
		//     this.isMpservice = true;
		//   } else if (this.service_type == 20) {
		//     if (this.shop_info.serviceUserId == 0) {
		//       uni.showToast({
		//         title: "尚未设置客服",
		//         icon: "none", //如果要纯文本，不要icon，将值设为'none'
		//         duration: 2000, //持续时间为 2秒
		//       });
		//     } else {
		//       this.gotoPage(
		//         "/pages/plus/chat/chat?userId=" +
		//           this.shop_info.serviceUserId +
		//           "&shopSupplierId=" +
		//           this.shop_info.shopSupplierId +
		//           "&nickName=" +
		//           this.shop_info.nickName
		//       );
		//     }
		//   }
		// },
		goback() {
			uni.navigateBack({});
		},
		/*关闭客服*/
		closeMpservice() {
			this.isMpservice = false;
		},
	},
};
</script>

<style lang="scss">
.box-type {
	width: 36rpx;
	height: 36rpx;
}

.sales {
	color: #ffffff;
}

.collect {
	color: #ffffff;
}

.nav_bottom {
	height: 100rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	background-color: #ffffff;
}

.nav_bottom .icon {
	font-size: 50rpx;
}

.nav_bottom .active {
	@include font_color("font_color");
}

.nav_bottom .active .icon {
	@include font_color("font_color");
}

.live_list {
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 30rpx;
}

.live_item {
	position: relative;
	margin: 10rpx 0;
}

.live_img {
	width: 100%;
}

.live_img image {
	width: 335rpx;
	height: 375rpx;
	border-radius: 15rpx;
}

.live_name {
	font-size: 34rpx;
	margin: 15rpx 0;
}

.record {
	position: absolute;
	top: 0;
	width: 150rpx;
	font-size: 22rpx;
	height: 33rpx;
	line-height: 32rpx;
	text-align: center;
	background: #fdd933;
	color: #ffffff;
}

.record_off {
	position: absolute;
	top: 0;
	width: 150rpx;
	font-size: 22rpx;
	height: 33rpx;
	line-height: 32rpx;
	text-align: center;
	background: #fdd933;
	color: #ffffff;
}

.mpservice-wrap {
	width: 100%;
	box-sizing: border-box;
}

.mpservice-wrap .mp-image {
	width: 560rpx;
	margin-top: 40rpx;
}

.mpservice-wrap .mp-image image {
	width: 100%;
}

.head_top {
	position: relative;
	height: 30px;
	line-height: 30px;
	color: #ffffff;
	font-size: 30rpx;
}

.bg_topimg {
	position: absolute;
	top: 0;
	z-index: 0;

	.bg-head-shoadow {
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(#000, 0.35);
		z-index: 2;
		width: 750rpx;
	}

	.bg-head {
		width: 750rpx;
		z-index: 1;
	}
}

.coupon {
	position: relative;
	// background-color: #ffffff;
	overflow: hidden;
	padding-bottom: 160rpx;
}

.noborder {
	border: none;
}

.item-wrap {
	border: 1px solid #eee;
}

/* 重制 */
.shop_head {
	background: linear-gradient(45deg, #4f516a 0%, #394263 100%);
	z-index: 1;
}

.shop_head.bgNull {
	background: none;
}

.serach-box {
	position: relative;
	z-index: 100;
	padding: 0 20rpx;

	.icon-Homehomepagemenu {
		color: #fff;
		font-size: 28rpx;
		width: 60rpx;
		height: 60rpx;
		background: rgba(#fff, 0.25);
		border-radius: 29rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 28rpx;
	}
}

.top_search {
	height: 60rpx;
	line-height: 60rpx;
	background: #ffffff;
	border-radius: 30rpx;
	font-size: 26rpx;
	color: #999;
}

.top_search.search-wx {
	flex: 1;
}

.top_search.special {
	width: 100%;
	border: 1px solid transparent;
	border-right: none;
}

.top_search .icon-sousuo {
	font-size: 26rpx;
	color: #999;
	margin-left: 26rpx;
	margin-right: 10rpx;
}

.shop_logo {
	width: 102rpx;
	height: 102rpx;
	display: block;
	border-radius: 20rpx;
	margin-right: 20rpx;

	.shop_logo_image {
		width: 102rpx;
		height: 102rpx;
		border-radius: 20rpx;
	}
}

.shop_info {
	flex: 1;
	box-sizing: border-box;
	padding-top: 10rpx;

	.icon.icon-jiantou1 {
		font-size: 28rpx;
		color: #fff;
		font-weight: 400;
	}
}

.shop_head_info {
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 26rpx 18rpx 26rpx 22rpx;
	box-sizing: border-box;

	.collected {
		width: 128rpx;
		height: 56rpx;
		border-radius: 26rpx;
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 1;
		color: #fff;
		border: 1px solid;
		@include border_color("border_color");
		@include background_color("background_color");
	}
}

.inner-tab {
	position: relative;
	height: 80rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #ffffff;
	z-index: 9;

	.item {
		flex: 1;
		color: #333;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.item.active {
		position: relative;
	}

	.item.active,
	.item .arrow.active .iconfont {
		@include font_color("font_color");
	}

	.item.active::after {
		content: "";
		position: absolute;
		bottom: 0rpx;
		width: 42rpx;
		height: 5rpx;
		@include background_color("background_color");
		border-radius: 2rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
}

.inner-tab .item .box {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}

.inner-tab .item .arrows {
	margin-left: 10rpx;
	line-height: 0;
}

.inner-tab .item .iconfont {
	line-height: 24rpx;
	font-size: 24rpx;
}

.inner-tab .item .arrow,
.inner-tab .item .svg-icon {
	width: 20rpx;
	height: 20rpx;
}

.product-lists {
	width: 100%;
	background-color: #ffffff;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	margin-top: 20rpx;

	.product_item {
		margin: 0 auto;
		display: flex;
		padding: 22rpx 0;
		box-sizing: border-box;
		border-bottom: 1rpx solid #eee;

		.product_images {
			width: 210rpx;
			height: 210rpx;
			background-color: rgba(0, 0, 0, 0.1);
			border-radius: 25rpx;
			overflow: hidden;
			position: relative;

			.product-sellout {
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(#000, 0.45);
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 1;
				width: 210rpx;
				height: 210rpx;

				.product-sellout-btn {
					width: 106rpx;
					height: 46rpx;
					border-radius: 5rpx;
					border: 1px solid #ffffff;
					font-size: 24rpx;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.product_image {
				width: 210rpx;
				height: 210rpx;
			}
		}

		.product_item_info {
			flex: 1;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			padding-left: 20rpx;
			box-sizing: border-box;

			.product-name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
				display: -webkit-box;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.product-sale {
				font-size: 24rpx;
				color: #999999;
				flex: 1;
			}
		}
	}

	.product_item:last-child {
		border: none;
	}
}

.product-lists.list-2 {
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx;
	align-items: flex-start;
	background: none;
	flex-wrap: wrap;

	.product_item {
		background-color: #ffffff;
		width: 344rpx;
		flex-direction: column;
		margin: 0;
		border-radius: 15rpx;
		overflow: hidden;
		padding: 22rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		border: none;

		.product_images {
			width: 304rpx;
			height: 304rpx;
			border-radius: 15rpx;
			margin-bottom: 14rpx;

			.product-sellout {
				width: 304rpx;
				height: 304rpx;

				.product-sellout-btn {
					width: 162rpx;
					height: 68rpx;
					font-size: 32rpx;
				}
			}

			.product_image {
				width: 304rpx;
				height: 304rpx;
			}
		}

		.product_item_info {
			padding: 0;

			.product-name {
				-webkit-line-clamp: 1;
				margin-bottom: 10rpx;
			}

			.product-sale {
				flex: 0;
				margin-bottom: 10rpx;
			}
		}
	}
}

.starts {
	width: 24rpx;
	height: 24rpx;
	margin-right: 6rpx;
	display: block;
}

.starts-box {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.mpservice-wrap {
	width: 100%;
	box-sizing: border-box;
}

.noDatamodel {
	font-size: 30rpx;
	width: 100%;
	text-align: center;
	height: 200rpx;
	line-height: 128rpx;
	color: #666;
}

.imgIcon {
	width: 80rpx;
}

.desc {
	font-size: 28rpx;
	color: #666;
	letter-spacing: 1rpx;
}

.swiper-box .swiper {
	width: 750rpx;
	height: 308rpx;
	border-radius: 30rpx 30rpx 0 0;
	/* background-color: #FFFFFF; */
	box-sizing: border-box;
}

.swiper-box image {
	width: 710rpx;
	height: 262rpx;
	border-radius: 25rpx;
	margin: 0 auto;
}

.swiper-box .swiper-dots {
	position: absolute;
	bottom: 40rpx;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	z-index: 2;
}

.swiper-dots.rectangle .swiper-dot {
	width: 40rpx;
	height: 6rpx;
	margin: 0 4rpx;
	background: #fff;
	opacity: 0.3;
	border-radius: 4rpx;
}

.swiper-dots.rectangle .swiper-dot.active {
	opacity: 1;
}
</style>